<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>欢迎注册会员</title>
<style>
  body {
    font-family: "Microsoft YaHei", sans-serif;
    background-color: #f5f5f5;
  }
  .container {
    width: 360px;
    margin: 50px auto;
    padding: 15px 25px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
  }
  h3 {
    color: #3366cc;
    margin-bottom: 15px;
  }
  label {
    display: inline-block;
    width: 80px;
    vertical-align: top;
  }
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="date"],
  select,
  textarea {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  input[type="file"] {
    width: 220px;
  }
  .required {
    color: red;
    margin-left: 3px;
  }
  .captcha {
    display: inline-block;
    width: 60px;
    height: 25px;
    background: #eef;
    text-align: center;
    font-weight: bold;
    border: 1px solid #ccc;
    margin-left: 5px;
    vertical-align: middle;
  }
  .refresh {
    cursor: pointer;
    color: #3366cc;
    font-weight: bold;
  }
  .buttons {
    text-align: center;
    margin-top: 15px;
  }
  input[type="submit"], input[type="reset"] {
    padding: 5px 15px;
    margin: 5px;
  }
  .birthplace select {
    width: 105px;
    margin-right: 5px;
  }

  /* 图片预览样式 */
  #previewArea {
    margin-left: 80px;
    margin-top: 8px;
  }
  #previewImage {
    max-width: 220px;
    max-height: 150px;
    border: 1px solid #ccc;
    display: none;
  }
  #noImage {
    color: #999;
    font-size: 13px;
  }
</style>
</head>
<body>
  <div class="container">
    <h3>欢迎注册会员</h3>

    <form id="registerForm">
      <p>
        <label>手机号：</label>
        <input type="text" placeholder="11位手机号" required>
        <span class="required">必填</span>
      </p>
      <p>
        <label>创建密码：</label>
        <input type="password" placeholder="8位密码" required>
        <span class="required">必填</span>
      </p>
      <p>
        <label>注册邮箱：</label>
        <input type="email" placeholder="例如:wustzz@sina.com" required>
        <span class="required">必填</span>
      </p>
      <p>
        <label>验证码：</label>
        <input type="text" style="width:100px;">
        <span class="captcha" id="captcha">UJFg</span>
        <span class="refresh" onclick="refreshCaptcha()">⟳</span>
      </p>

      <p>
        <label>性别：</label>
        <label><input type="radio" name="gender" value="男">男</label>
        <label><input type="radio" name="gender" value="女">女</label>
      </p>

      <p>
        <label>生日：</label>
        <input type="date">
      </p>

      <p>
        <label>年龄：</label>
        <input type="text" style="width:60px;">
      </p>

      <p class="birthplace">
        <label>籍贯：</label>
        <select>
          <option>湖北省</option>
          <option>湖南省</option>
          <option>广东省</option>
          <option>江苏省</option>
        </select>
        <select>
          <option>武汉</option>
          <option>长沙</option>
          <option>广州</option>
          <option>南京</option>
        </select>
      </p>

      <p>
        <label>个人学历：</label>
        <select style="width: 220px;">
          <option>本科</option>
          <option>硕士</option>
          <option>博士</option>
          <option>专科</option>
        </select>
      </p>

      <p>
        <label>月薪：</label>
        <input type="range" min="1000" max="20000" value="5000" step="500" oninput="salary.value=this.value">
        <output name="salary">5000</output>
      </p>

      <p>
        <label>个人爱好：</label>
        <label><input type="checkbox" name="hobby" value="唱歌">唱歌</label>
        <label><input type="checkbox" name="hobby" value="跑步">跑步</label>
        <label><input type="checkbox" name="hobby" value="游泳">游泳</label>
      </p>

      <p>
        <label>个人照片：</label>
        <input type="file" id="photoInput" accept="image/*">
      </p>

      <!-- 图片预览 -->
      <div id="previewArea">
        <img id="previewImage" src="" alt="预览">
        <p id="noImage">未选择任何文件</p>
      </div>

      <p>
        <label>个人简介：</label>
        <textarea rows="4" style="width:220px;"></textarea>
      </p>

      <div class="buttons">
        <input type="submit" value="提交">
        <input type="reset" value="重置" onclick="resetPreview()">
      </div>
    </form>
  </div>

<script>
  // 验证码随机生成
  function refreshCaptcha() {
    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let code = "";
    for (let i = 0; i < 4; i++) {
      code += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    document.getElementById("captcha").innerText = code;
  }

  // 图片上传预览功能
  const photoInput = document.getElementById("photoInput");
  const previewImage = document.getElementById("previewImage");
  const noImage = document.getElementById("noImage");

  photoInput.addEventListener("change", function() {
    const file = this.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function(e) {
        previewImage.src = e.target.result;
        previewImage.style.display = "block";
        noImage.style.display = "none";
      };
      reader.readAsDataURL(file);
    } else {
      resetPreview();
    }
  });

 // 清除图片预览
  function resetPreview() {
    previewImage.src = "";
    previewImage.style.display = "none";
    noImage.style.display = "block";
  }
</script>
</body>
</html>
